<template>
    <div>

        <div class="table-container">


            <router-link to="/home/addRole">
                <el-button type="primary" class="addButton"> 新增角色 </el-button>
            </router-link>


            <el-table :data="roles" stripe style="width: 100wh; text-align: center">
                <el-table-column align="center" prop="roleId" label="角色ID">
                </el-table-column>
                <el-table-column align="center" prop="roleName" label="角色名称">
                </el-table-column>

                <el-table-column align="center" prop="createTime" label="创建时间">
                </el-table-column>
                <el-table-column align="center" prop="updateTime" label="修改时间">
                </el-table-column>

                <el-table-column align="center" prop="description" label="描述信息">
                </el-table-column>

                <el-table-column align="center" label="角色权限">

                    <template slot-scope="scope">
                        <div v-for="(per, index) in scope.row.permissions" :key="index">
                            <el-tag size="mini">{{ per.permissionName }}</el-tag>
                        </div>
                    </template>

                </el-table-column>


                <el-table-column align="center" width="150px">
                    <template slot="header">
                        <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
                    </template>
                    <template slot-scope="scope">


                        <router-link :to="{ path: '/home/editRole', query: { roleId: scope.row.roleId } }">
                            <el-button size="mini">Edit</el-button>
                        </router-link>


                        <!-- 删除按钮 handleDelete(scope.$index, scope.row) -->
                        <el-button size="mini" type="danger" @click="handleDelete(scope.row.roleId)">Delete</el-button>


                    </template>
                </el-table-column>
            </el-table>
            <el-pagination class="page" background layout="prev, pager, next,total" :total="100">
            </el-pagination>
        </div>

    </div>
</template>

<script>
import { getRoleListWithPermissions, deleteByRoleId } from '@/api/role.js'

export default {
    data() {
        return {
            search: "",
            roles: [],
        }
    },
    methods: {
        // 删除按钮 确认 对应的方法
        handleDelete(roleId) {
            deleteByRoleId(roleId).then((result) => {

                getRoleListWithPermissions().then((result) => {
                    this.roles = result.data
                }).catch((err) => {

                });

            }).catch((err) => {

            });
        }
    },
    mounted() {
        getRoleListWithPermissions().then((result) => {
            this.roles = result.data
        }).catch((err) => {

        });
    }
}
</script>


<style>
.table-container {
    position: relative;
}

.addButton {
    position: absolute;
    top: 10px;
    /* 距离顶部的距离，根据需要调整 */
    right: 10px;
    /* 距离右侧的距离，根据需要调整 */
    z-index: 1;
}
</style>